<template>
	<view>
		<u-navbar title="音频库" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col page">
			
			<!-- <view class="flex-col self-stretch"> -->
				<!-- <view class="flex-row justify-center relative group">
					<image class="image_2 pos"
						src="https://ide.code.fun/api/image?token=66ac403247b10e00112738ca&name=594c25a36ed5e7363da703ed3b0e7468.png" />
					<text class="text">音频列表</text>
				</view> -->
				<view class="flex-col">
					<view class="flex-col section">
						<view class="flex-row justify-between items-center">
							<view class=" font text_2">音频选择</view>
							<view class="select-audio" @click="toAddAudio">
								添加音频
							</view>
						</view>
						
						<view class="mt-22 flex-col self-stretch audio-list">
							<!-- <view class="flex-col justify-start relative">
								<view class="section_2"></view>
								<image class="image_3 pos_2"
									src="https://ide.code.fun/api/image?token=66ac403247b10e00112738ca&name=4877724722cc46687469060767153306.png" />
								<text class="font_2 text_3 pos_4">职场女性箴言</text>
								<image class="image_4 pos_3"
									src="https://ide.code.fun/api/image?token=66ac403247b10e00112738ca&name=fa3936c52da6f0076840661d738dff68.png" />
							</view> -->
							<view class="list-item flex-row justify-between" v-for="(item,index) in AudioList" :key="index" :class="item.isClick == true? 'border-green' : ''" @click="newAudioClick(index,item)">
								<view class="flex-row items-center list-item-wrap flex-1" >
									<!-- <view class="section_3"></view> -->
									<image class="image_3"
										src="https://terminator.axu9.com/images/audio-select-icon.png" />
										<view class="flex-col justify-center flex-1">
											<text class=""  :class="item.isClick == true? 'font_33' : 'font_3'">{{item.title}}</text>
											<text class=""  :class="item.isClick == true? 'font_33' : 'font_3'" style="margin-top: 10rpx;">{{item.duration}}</text>
											<text v-if="item.status == 0" class="text_status">生成中...</text>
											<text v-if="item.status == 2" class="text_status">失败</text>
											<text v-if="item.status == 3" class="text_status">音色下架</text>
										</view>
									<!-- <text class=""  :class="item.isClick == true? 'font_33' : 'font_3'">{{item.title}}</text> -->
								</view>
								<view class="flex-row items-center" v-if="item.isClick && item.status == 1">
									<image mode="" class="image_5"
										src="https://terminator.axu9.com/images/playing.gif" />
										<!-- <image mode="widthFix" class="image_5"
											src="https://terminator.axu9.com/images/playing.gif" /> -->
										
								</view>
								<!-- 占位 -->
								<view class="image_5" v-else></view>
								
								<view class="flex-row items-center justify-end" style="width: 150rpx;">
									<image @click.stop="editClick(item.id,item.title)" class="image_edit"
											src="../../static/image/other/audio-list-edit.png" />
									<image @click.stop="delClick(item.id)" class="image_del"
													src="../../static/image/other/audio-list-del.png" />
								</view>
							</view>
							
							
						</view>
					</view>
					<view class="bottom flex-row justify-center">
						<view @click="submit" class="flex-col justify-start items-center text-wrapper"><text class="font">确定</text>
						</view>
					</view>
					
				</view>
			<!-- </view> -->
		</view>
		<!-- 修改音色标题弹窗 -->
		<edit-title ref="editTitle" :audioTitle="audioName" @editSuccess="editSuccess"></edit-title>
	</view>
</template>

<script>
	import { audioList, updateMp3 } from "@/api/audio.js"
	import { delAudio } from "@/api/user.js"
	import editTitle from "../../components/editTitlePop/index.vue";
	export default {
		components: {
			editTitle
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				AudioList: [],
				// audioIndex: 0,
				videoPath: '',//视频地址
				audioTitle: '',//音频标题
				audioUrl: '',//音频地址
				audioIndex: -1,//播放的index
				innerAudioContext: null,
				playIndex: -1,//点击的index
				duration: '',//选中的音频时长
				audioName: '',//修改标题名称
				audioId: '',//修改标题id
				integral: '',//积分
				status: 1,//音频状态 0生成中 1成功 2失败
				// modeValue: '标清'
				timer: null
			}
		},
		onLoad(options){
			// console.log(options,'audioList')
			this.getAudio();
			// this.timer = setInterval(() => {
			// 	// console.log('走了么')
			// 	this.getAudio();
			// }, 2000)
			
			this.videoPath = options.videoPath ? options.videoPath : '';
			
			// this.modeValue = options.modeValue ? options.modeValue : '标清';
			// this.getVideoPath();
		},
		onShow() {
			this.contextInit();
			this.timer = setInterval(() => {
				// console.log('走了么')
				this.getAudio();
			}, 2000)
		},
		created() {
			this.contextInit();
		},
		beforeDestroy() {
			// console.log('离开')
			this.innerAudioContext.stop();
			this.innerAudioContext.destroy();
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		onHide() {
			this.innerAudioContext.stop();
			this.innerAudioContext.destroy();
			if(this.audioIndex!=-1){
				this.AudioList[this.audioIndex].isClick = false
				this.audioId = ""
				this.audioIndex = -1
			}
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			contextInit() {
				let that = this;
				var innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;
				innerAudioContext.obeyMuteSwitch = false;
				
				innerAudioContext.loop = false;
				innerAudioContext.onPlay(() => {
					// that.audioIndex = that.playIndex;
					console.log('开始播放',that.audioIndex); 
				});
				innerAudioContext.onPause(() => {
					// that.audioIndex = -1;
					that.audioId = ""
					console.log('暂停播放'); 
				});
				innerAudioContext.onTimeUpdate(function() {
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				});
				innerAudioContext.onEnded(function() {
					that.AudioList[that.audioIndex].isClick = false
					that.audioIndex = -1;
					console.log('暂停播放'); 
				});
				
				innerAudioContext.onError((res) => {
				
				});
				that.innerAudioContext = innerAudioContext
			},
			// 编辑音频标题
			editClick(id,title){
				this.audioName = title;
				this.audioId = id;
				console.log(this.audioName,'1111')
				this.$refs.editTitle.open();
			},
			// 修改标题
			editSuccess(data){
				console.log(data,'editSuccess')
				this.audioName = data;
				uni.showLoading({
					title: '修改中'
				})
				updateMp3({
					id: this.audioId,
					title: this.audioName
				}).then(res => {
					uni.hideLoading();
					if(res.errno == 0){
						this.$refs.editTitle.close();
						this.audioName = '';
						this.audioId = '';
						this.getAudio();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					ni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			// 删除音频
			delClick(id) {
				this.audioId = id;
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该音频么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.delMp3();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 删除 音频
			delMp3() {
			
				uni.showLoading({
					title: '删除中'
				})
				delAudio({
					id: this.audioId,
					type: 1
				}).then(res => {
					uni.hideLoading();
					if (res.errno == 0) {
						this.audioId = '';
						this.getAudio();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
			
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			toAddAudio(){
				uni.navigateTo({
					url: '/pagesCreate/addAudioOption/index?toOptionType=2' + '&videoPath=' +this.videoPath
				})
			},
			getVideoPath(){
				// 获取当前页面栈
				let pages = getCurrentPages();
				// 获取上一个页面
				let prevPage = pages[pages.length - 2];
				// 获取上一个页面的data
				let data = prevPage.data;
				// 访问data中的数据
				console.log(data.videoPath,'datatat'); // 替换yourDataKey为你需要的数据键名
				this.videoPath = data.videoPath;
			},
			getAudio(){
				audioList({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					// console.log(res,'ffffff')
					// this.AudioList = res.data
					var arr = res.data.map(item => {
						item['isClick'] = false
						if(item.id == this.audioId && this.audioIndex!=-1){
							item.isClick = true
						}
						return item
						// return {
						// 	...item,
						// 	isClick: false
						// }
					})
					this.AudioList = arr;
				}).catch(err => {
					
				})
			},
			// playAudio(item,index) {
			// 	this.audioIndex = index;
			// 	this.audioTitle = item.title;
			// 	this.audioUrl = item.mp3;
			// 	console.log(item,'itemmmmmm',item.mp3,item.title);
				
			// },
			submit(){
				if(this.status == 0 || this.status == 2){
					uni.showToast({
						title:'音频无法选择',
						icon: 'none'
					})
					return
				}
				uni.reLaunch({
					url: '/pages/create/index?audioTitle=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath + '&audioId=' + this.audioId + '&modeValue=' + this.modeValue
				})
			},
			newAudioClick(index,item){
				if(item.status == 0 || item.status == 2){
					uni.showToast({
						title:'音频无法播放',
						icon: 'none'
					})
					return
				}
				
				this.audioUrl = item.mp3;
				this.status = item.status;
				this.audioIndex = index;
				this.audioTitle = item.title;
				if(!item.isClick&&this.audioId!=item.id){
					this.innerAudioContext.stop();
					let data = this.AudioList.findIndex(it=>it.id === this.audioId)
					if(data!=-1){
						this.AudioList[data].isClick = false
					}
					this.innerAudioContext.src = item.mp3;
					this.innerAudioContext.play()
					item.isClick = true
				}else{
					if(!item.isClick){
						// this.playIndex = index;//播放的音频的下标
						// this.innerAudioContext.src = item.mp3;
						this.innerAudioContext.play()
						item.isClick = true
					}else {
						this.innerAudioContext.pause()
						item.isClick = false
					}
				}
				this.audioId = item.id;
				// item.isClick = item.isClick ? false : true
			},
			
			audioClick(index,item){
				
				this.audioUrl = item.mp3;
				this.status = item.status;
				console.log(this.status,'kskssksksksk')
				this.audioIndex = index;
				this.audioTitle = item.title;
				this.audioId = item.id;
				// this.duration = item.duration;
				// this.integral = item.integral;
				console.log(index,item.isClick,this.innerAudioContext.paused,'点击音频qqqqqq')
				var arr = this.AudioList.map((items,indexs) => {
					return {
						...items,
						isClick: index == indexs ? true : false
					}
				})
				this.AudioList = arr;
				if(this.status == 0 || this.status == 2){
					uni.showToast({
						title:'音频无法播放',
						icon: 'none'
					})
					return
				}
				if(!item.isClick) {
					this.innerAudioContext.stop();
					this.playIndex = index;//播放的音频的下标
					this.innerAudioContext.src = item.mp3;
					this.innerAudioContext.play()
				}else {
					if(this.innerAudioContext.paused){
						this.playIndex = index;//播放的音频的下标
						this.innerAudioContext.src = item.mp3;
						this.innerAudioContext.play()
					}else {
						this.innerAudioContext.pause()
					}
				}
				
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>

<style>
	@import url(../../static/css/common.css);
	page {
		height: 100vh;
		background-color: #111113;
	}

	.mt-23 {
		margin-top: 46rpx;
	}

	.mt-17-5 {
		margin-top: 35rpx;
	}

	/* page {
		padding: 35rpx 0 81rpx;
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	} */

	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding: 0 20rpx;
		
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section {
		padding: 46rpx 59rpx 46rpx;
		border-radius: 16rpx;
		background-image: url('https://terminator.axu9.com/images/home-audio-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* min-height: 80vh; */
	}
	.select-audio {
		border-radius: 29rpx;
		width: 160rpx;
		height: 60rpx;
		border: 2rpx solid #00e586;
		color: #00e586;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 60rpx;
		text-align: center;
	}

	.font {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		color: #ffffff;
	}

	.text_2 {
		font-weight: 500;
	}

	.section_2 {
		opacity: 0.41;
		background-color: #394440;
		border-radius: 20rpx;
		height: 120rpx;
		border-left: solid 1rpx #08f9a7;
		border-right: solid 1rpx #08f9a7;
		border-top: solid 1rpx #08f9a7;
		border-bottom: solid 1rpx #08f9a7;
	}

	.image_3 {
		width: 81rpx;
		height: 74rpx;
	}

	.pos_2 {
		position: absolute;
		left: 20rpx;
		bottom: 16rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		color: #ffffff;
	}

	.text_3 {
		color: #08f9a7;
		font-weight: 500;
		line-height: 29rpx;
	}

	.pos_4 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_4 {
		width: 88rpx;
		height: 40rpx;
	}

	.pos_3 {
		position: absolute;
		right: 55rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_3 {
		opacity: 0.2;
		background-color: #394440;
		border-radius: 20rpx;
		height: 120rpx;
		border-left: solid 1rpx #ffffff;
		border-right: solid 1rpx #ffffff;
		border-top: solid 1rpx #ffffff;
		border-bottom: solid 1rpx #ffffff;
	}

	.pos_5 {
		position: absolute;
		left: 20rpx;
		bottom: 16rpx;
	}

	.pos_6 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_7 {
		position: absolute;
		left: 20rpx;
		bottom: 18rpx;
	}

	.pos_8 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_9 {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_10 {
		position: absolute;
		left: 107rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.bottom {
		position: fixed;
		left: 0;
		bottom: 40rpx;
		width: 100%;
	}

	.text-wrapper {
		width: 690rpx;
		height: 99rpx;
		padding: 34rpx 0;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 50rpx;
	}
	.audio-list {
		height: 60vh;
		overflow-y: scroll;
		padding-bottom: 40rpx;
	}
	.list-item {
		  background-color: #23272a;
		  border-radius: 20rpx;
		  /* height: 120rpx; */
		  border: 1rpx solid #4a4b4f;
		  margin-top: 20rpx;
		  padding: 20rpx;
	}
	.list-item-wrap {
		/* width: 54%; */
	}
	.border-green {
		border: 1rpx solid #40795e;
		background-color: #2a3433;
	}
	.font_3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		/* line-height: 29rpx; */
		color: #ffffff;
		/* width: 90%; */
		word-break: break-all;
	}
	
	.font_33 {
		font-size: 30rpx;
		font-family: PingFang SC;
		/* line-height: 29rpx; */
		color: #08f9a7;
		/* width: 90%; */
		word-break: break-all;
	}
	.image_5 {
		/* width: 60rpx;
		height: 48rpx; */
		width: 80rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.image_edit {
		width: 70rpx;
		height: 70rpx;
	}
	.image_del{
		width: 70rpx;
		height: 70rpx;
		margin-left: 10rpx;
	}
	.text_status {
		color: #00e586;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
		margin-top: 10rpx;
	}
</style>